import React from 'react'
import { Switch,Route, Redirect } from 'react-router-dom'
// import Index from './pages/Index/Index'
// import Login from './pages/Login/Login'
// import Register from './pages/Register/Register'
// import List from './pages/List/List'
// import Detail from './pages/Detail/Detail'

import './App.less'
import PrivateRoute from '../src/utils/PrivateRoute'
// 懒加载
const Login = React.lazy(()=>import('./pages/Login/Login'))
const Register = React.lazy(()=>import('./pages/Register/Register'))
const Index = React.lazy(()=>import('./pages/Index/Index'))
const List = React.lazy(()=>import('./pages/List/List'))
const Detail = React.lazy(()=>import('./pages/Detail/Detail'))

export default function App() {
  return (
    <div className='indexpage'>
      {/* 路由视图 Switch */}
      <React.Suspense fallback={<div>正在加载中....</div>}>
      <Switch>
          {/* 路由规则 */}
          <Route path="/login" component={Login}></Route>
          <Route path="/register" component={Register}></Route>

          <PrivateRoute path="/index" component={Index}></PrivateRoute>
          <PrivateRoute path="/list" component={List}></PrivateRoute>
          <PrivateRoute path="/detail/:id" component={Detail}></PrivateRoute>

          {/* 重定向 */}
          <Redirect to="/login"></Redirect>
      </Switch>
      </React.Suspense>
    </div>
  )
}
